<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>5.键盘事件</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <!-- Vue官方提供的9个按键别名 -->
      <input type="text" placeholder="按下回车提示用户的输入" @keyup.enter="test1"> <br>
      <input type="text" placeholder="按下删除提示用户的输入" @keyup.delete="test1"> <br>
      <input type="text" placeholder="按下退出提示用户的输入" @keyup.esc="test1"> <br>
      <input type="text" placeholder="按下空格提示用户的输入" @keyup.space="test1"> <br>
      <input type="text" placeholder="按下换行提示用户的输入" @keydown.tab="test1"> <br>
      <input type="text" placeholder="按下↑提示用户的输入" @keyup.up="test1"> <br>
      <input type="text" placeholder="按下↓提示用户的输入" @keyup.down="test1"> <br>
      <input type="text" placeholder="按下←提示用户的输入" @keyup.left="test1"> <br>
      <input type="text" placeholder="按下→提示用户的输入" @keyup.right="test1"> <br>
      <hr>

      <!-- 也可以直接写键码 -->
      <input type="text" placeholder="按下回车提示用户的输入" @keyup.13="test1"> <br>
      <hr>

      <!-- 特殊的四个按键 -->
      <input type="text" placeholder="按下ctrl提示用户的输入" @keyup.ctrl="test1"> <br>
      <input type="text" placeholder="按下alt提示用户的输入" @keyup.alt="test1"> <br>
      <input type="text" placeholder="按下shift提示用户的输入" @keyup.shift="test1"> <br>
      <input type="text" placeholder="按下meta提示用户的输入" @keyup.meta="test1"> <br>


    </div>

    <script type="text/javascript">
      new Vue({
        el:'#demo',
        methods:{
          test1(event){
            alert(event.target.value)
          }
        }
      })
    </script>
  </body>
</html>